<template>
  <router-link :to="url">
    <div class="side-btn">
      <div class="btn-icon">
        <slot name="btn-icon"></slot>
      </div>
      <div class="btn-text">
        <slot name="btn-text"></slot>
      </div>
    </div>
  </router-link>
</template>

<script>
export default {
  name: "SideBtn",
  props: {
    url: {
      type: String,
      default: "no-link",
    },
  },
};
</script>

<style scoped>
.side-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: 20px 0;
  color: #ccc;
  transition: background 0.4s;
}

.btn-text{
    width: 50%;
    padding-left: 10px;
}

.side-btn:hover {
  color: #fff;
  /*background-color: ;*/
  /*box-shadow: 0 0 20px 0 #000 inset;*/
  /* background: #008ae6; */
  /*background-color: rgba(143, 146, 153, 0.836);*/
}
</style>
